<template>
  <el-main>
    <el-row class="search">
      <el-col :span="24">
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item label="合作商搜索：">
            <el-input
              v-model="searchForm.name"
              placeholder="请输入"
              size="medium"
              style="width: 203px"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              icon="el-icon-search"
              size="medium"
              style="width: 80px"
              @click="getPartner(searchForm)"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <el-row class="list">
      <el-col :span="24">
        <el-row class="add"
          ><el-col
            ><el-button
              icon="el-icon-circle-plus-outline"
              @click="(type = 'add') && (showDialog = true)"
              >新建</el-button
            ></el-col
          ></el-row
        >
        <el-row class="table">
          <el-col>
            <PartnerTable
              :partnerList="partnerList"
              @handlePreview="handlePreview"
              @handleEdit="handleEdit"
              @handleDelete="handleDelete"
              @resetPassword="resetPassword"
              :loading="loading"
            ></PartnerTable>
          </el-col>
        </el-row>
        <el-row class="page">
          <el-col :span="20">
            <span
              >共{{ page.totalCount }}条记录&nbsp;&nbsp;第&nbsp;{{
                page.pageIndex
              }}/{{ page.totalPage }}&nbsp;页</span
            >
          </el-col>
          <el-col :span="2">
            <el-button
              @click="
                (page.pageIndex > 1 ? page.pageIndex-- : page.pageIndex) &&
                  getPartner()
              "
              :disabled="page.pageIndex === 1"
              :class="{ disable: page.pageIndex === 1 }"
              >上一页</el-button
            >
          </el-col>
          <el-col :span="2">
            <el-button
              @click="
                (page.pageIndex < page.totalPage
                  ? page.pageIndex++
                  : page.pageIndex) && getPartner()
              "
              :disabled="page.pageIndex === +page.totalPage"
              :class="{ disable: page.pageIndex === +page.totalPage }"
              >下一页</el-button
            >
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <PartnerDialog
      :visible.sync="showDialog"
      :type="type"
      :partnerList="partnerList"
      :currentRow="currentRow"
      ref="PartnerDialog"
    ></PartnerDialog>
  </el-main>
</template>

<script>
import PartnerTable from './components/PartnerTable.vue'
import PartnerDialog from './components/PartnerDialog.vue'
import { partner, delPartner } from '@/api/dianwei'
export default {
  components: {
    PartnerTable,
    PartnerDialog
  },
  data () {
    return {
      searchForm: {
        name: ''
      },
      type: '',
      page: {
        pageIndex: 1,
        pageSize: 10,
        totalCount: 0,
        totalPage: 0
      },
      showDialog: false,
      loading: false,
      partnerList: [],
      currentRow: {}
    }
  },
  created () {
    this.getPartner()
  },
  methods: {
    async getPartner (search) {
      try {
        this.loading = true
        let res = {}
        if (search) {
          res = await partner({
            pageIndex: this.page.pageIndex,
            pageSize: this.page.pageSize,
            name: search.name
          })
        } else {
          res = await partner({
            pageIndex: this.page.pageIndex,
            pageSize: this.page.pageSize
          })
        }
        this.partnerList = res.currentPageRecords
        this.page.totalPage = res.totalPage
        this.page.totalCount = res.totalCount
      } finally {
        this.loading = false
      }
    },
    resetPassword (index, row) {},
    handleEdit (index, row) {
      console.log(row)
      this.type = 'edit'
      this.showDialog = true
      this.$refs.PartnerDialog.partnerForm = {
        account: row.account,
        contact: row.contact,
        mobile: row.mobile,
        name: row.name,
        password: row.password,
        ratio: row.ratio,
        id: row.id
      }
    },
    handlePreview (index, row) {
      this.type = 'preview'
      this.showDialog = true
      this.currentRow = row
    },
    async handleDelete (index, row) {
      // console.log(row)
      try {
        await delPartner({
          id: row.id,
          name: row.name,
          pageIndex: this.page.pageIndex,
          pageSize: this.page.pageSize
        })
      } catch (e) {
        console.log(e)
        this.$notify.info({
          title: '提示',
          iconClass: 'message-icon',
          message: e.response.data
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
.el-main {
  width: 89vw;
  background-color: #f8fafd;
  color: #333;
  display: block;
}
.el-row {
  margin-bottom: 20px;
  border-radius: 0;
  &.search {
    height: 64px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  &.list {
    margin-bottom: 0;
    background-color: white;
    // height: 673px;
  }
}

.el-form--inline {
  height: 100%;
  .el-form-item {
    height: 100%;
    margin-bottom: 0;
    // padding-top: 12px;
    ::v-deep .el-form-item__label {
      color: #606266;
      padding-left: 17px;
    }
    &.area ::v-deep .el-form-item__label {
      padding-left: 0px;
    }
    .el-button--medium {
      padding: 0;
      height: 36px;
      background-color: #6783f7;
      color: white;
      border: none;
      line-height: 36px;
    }
  }
}

::v-deep i {
  font-size: 16px;
  vertical-align: middle;
}
::v-deep span {
  // margin-left: 8px !important;
  vertical-align: middle;
}
.add {
  // height: 36px;
  margin: 20px 0;
  .el-button {
    padding: 0;
    // height: 100%;
    width: 80px;
    background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
    border: none;
    line-height: 36px;
    color: white;
    margin-left: 17px;
  }
}

.table {
  // height: 482px;
  max-width: 100%;
  background-color: white;
  padding: 0px 15px 0px 17px;
  margin-bottom: 0;
}

.page {
  // background-color: #d6ddf6;
  // height: 96px;
  padding: 32px 16px 32px 33px;
  .el-button {
    height: 32px;
    width: 70px;
    padding: 0;
    margin: 0 16px;
    border: none;
    background-color: #d6ddf6;
    color: black;
    font-weight: 200;
    font-size: 13px;
    border-radius: 2px;
    &.disable {
      background-color: #eef0f8;
      color: #d9dde2;
    }
  }
  span {
    font-size: 16px;
    color: #dbdfe5 !important;
    margin-right: 10px;
    font-weight: 400;
  }
}
</style>
<style lang="scss">
.message-icon {
  color: #f58646 !important;
}
</style>
